<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>GoJS&reg; DraggingTool Class</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../assets/js/bootstrap.min.js"></script>
    <script src="../../assets/js/highlight.js"></script>
    <script src="../../assets/js/api.js"></script>

    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
    <!-- custom CSS after bootstrap -->
    <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
    <!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
    <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />

    </head>

    <body>
    <!--
  <div id="topbar">
    <div id="topbar-inner">
      <ul>
        <li><a href="../../index.html">Home</a></li>
        <li><a href="../../learn/index.html">Learn</a></li>
        <li><a href="../../samples/index.html">Samples</a></li>
        <li><a href="../../intro/index.html">Intro</a></li>
        <li><a href="../index.html">API</a></li>
        <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
        <li><a href="../../doc/download.html">Download</a></li>
        <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
        <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
        <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
        <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
      </ul>
    </div>
  </div>
-->


  <!-- non-fixed navbar -->
    <nav id="api-nav" class="navbar navbar-inverse navbar-top">
      <div class="container">
        <div class="navbar-header" data-toggle="collapse" data-target="#navbar">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">GoJS</a>-->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="../../index.html">Home</a></li>
            <li><a href="../../learn/index.html">Learn</a></li>
            <li><a href="../../samples/index.html">Samples</a></li>
            <li><a href="../../intro/index.html">Intro</a></li>
            <li><a href="../../api/index.html">API</a></li>
            <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
            <li><a href="../../doc/download.html">Download</a></li>
            <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
            <li><a href="https://www.nwoods.com/support/query.htm">Contact</a></li>
            <li class="buy"><a href="https://www.nwoods.com/sales/ordering.htm">Buy</a></li>
            <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div class="container-fluid" id="api-container">
    <div class="row">

<!-- ============================== classes index ============================ -->
     <div id="navindex" class="col-md-2">
        <!-- begin publish.classesIndex -->
        <!-- <div><a href="../index.html">GoJS Class Index</a></div> -->

<div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#DiagramNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Diagram Classes</span>
    </div>
    <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
      
        <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
      
        
      
        <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
      
        <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
      
        
      
        <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
      
        <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
      
        
      
        
      
        <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
      
        <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
      
        <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
      
        <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
      
        
      
        <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
      
        
      
        
      
        <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
      
        <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
      
        
      
        <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
      
        
      
        
      
        <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#GeometryNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Geometry Classes</span>
    </div>
    <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
      
        <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
      
        
      
        
      
        <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
      
        <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
      
        <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ModelNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Model Classes</span>
    </div>
    <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
      
        
      
        <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
      
        
      
        
      
        <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
      
        
      
        <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#LayoutNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Layout Classes</span>
    </div>
    <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
      
        
      
        <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
      
        
      
        <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#ToolNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Tool Classes</span>
    </div>
    <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
      
        <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
      
        
      
        <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
      
        
      
        
      
        <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
      
        <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
      
        <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
      
        <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
      
        <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
      
        <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
      
        <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
      
        <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>

  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header" data-toggle="collapse" data-target="#CollectionNavbar">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Collection Classes</span>
    </div>
    <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="classList nav navbar-nav">
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
      
        <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
      
        <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
        
      
    </ul>
    </div>
  </div>
</div> <!-- /class="sidebar-nav -->




        <!-- end publish.classesIndex -->
    </div>

    <div id="contentBody" class="col-md-10">
    <!-- ============================== header ================================= -->
    <div id="header" class="fineprint mt30">
      <b>GoJS</b>&reg; Diagramming Components<br/>version 1.6.10 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
    </div>

<!-- ============================== class title ============================ -->
            <h2 class="classTitle mt30">
                
                Class DraggingTool
                
            </h2>

<!-- ============================== class summary ========================== -->
      <span class="hideshowall">
        <span class="nodetails"><button id="buttonShow">Show Details</button></span>
        <span class="details"><button id="buttonHide">Show Summaries</button></span>
      </span>

            <p class="classsummary">
                
                <span class="extends"> Extends
                    <a href="../symbols/Tool.html" class="linkConstructor">Tool</a>.</span>
                

                The DraggingTool is used to move or copy selected parts with the mouse.This sets the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> property; you may want to save the location to the modelby using a TwoWay <a href="../symbols/Binding.html" class="linkConstructor">Binding</a> on the "location" property in your Parts/Nodes/Groups templates.<p>Dragging the selection moves parts for which <a href="../symbols/Part.html#canMove" class="linkMethod">Part.canMove</a> is true.If the user holds down the Control key (Option key on Mac), this tool will make a copy of the parts being dragged,for those parts for which <a href="../symbols/Part.html#canCopy" class="linkMethod">Part.canCopy</a> is true.<p>When the drag starts it calls <a href="../symbols/DraggingTool.html#computeEffectiveCollection" class="linkMethod">computeEffectiveCollection</a> to find the actual collectionof <a href="../symbols/Part.html" class="linkConstructor">Part</a>s to be dragged.Normally this collection includes not only the <a href="../symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>, but also parts that belongto those selected parts, such as members of groups.If <a href="../symbols/DraggingTool.html#dragsTree" class="linkProperty">dragsTree</a> is true, the effective collection also includes all of the nodes and links thatconstitute the subtree starting from selected nodes.The result of <a href="../symbols/DraggingTool.html#computeEffectiveCollection" class="linkMethod">computeEffectiveCollection</a> is not a <a href="../symbols/Set.html" class="linkConstructor">Set</a> but a <a href="../symbols/Map.html" class="linkConstructor">Map</a>which remembers the original <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> for all of the dragged parts.This map is saved as the value of <a href="../symbols/DraggingTool.html#draggedParts" class="linkProperty">draggedParts</a>.<p>During the drag if the user holds down the Control/Option key this tool makes a copy of the <a href="../symbols/DraggingTool.html#draggedParts" class="linkProperty">draggedParts</a>and proceeds to drag it around.(It only copies the <a href="../symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>, not the whole effective collection,if <a href="../symbols/DraggingTool.html#copiesEffectiveCollection" class="linkProperty">copiesEffectiveCollection</a> is false.)The collection of copied parts is held by <a href="../symbols/DraggingTool.html#copiedParts" class="linkProperty">copiedParts</a>.It too is a <a href="../symbols/Map.html" class="linkConstructor">Map</a> remembering the original locations of the parts.<a href="../symbols/DraggingTool.html#copiedParts" class="linkProperty">copiedParts</a> will be null when this tool is moving (not copying) at the moment.<p>Each Part's movement is limited by the <a href="../symbols/DraggingTool.html#computeMove" class="linkMethod">computeMove</a> method.By default it limits the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> to be within the bounds given by <a href="../symbols/Part.html#minLocation" class="linkProperty">Part.minLocation</a> and <a href="../symbols/Part.html#maxLocation" class="linkProperty">Part.maxLocation</a>.(Those default to minus Infinity to plus Infinity.)As a further convenience, the value of NaN in minLocation and maxLocation cause <a href="../symbols/DraggingTool.html#computeMove" class="linkMethod">computeMove</a> to use thepart's current location.So, for example, an easy way to declare that the user may only drag a node horizontally is to just set:<pre>$(go.Node,  . . .  { minLocation: new go.Point(-Infinity, NaN), maxLocation: new go.Point(Infinity, NaN) },  . . .)</pre><p>If you set <a href="../symbols/DraggingTool.html#isGridSnapEnabled" class="linkProperty">isGridSnapEnabled</a> to true, dragged or copied parts will be snapped to points on a grid.The snapping occurs continuously during a drag unless you set <a href="../symbols/DraggingTool.html#isGridSnapRealtime" class="linkProperty">isGridSnapRealtime</a> to false.Normally the grid points come from the <a href="../symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>, even if that grid is not <a href="../symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>.However you can override those grid's properties for the snapping grid cell size and offsetby setting the properties here: <a href="../symbols/DraggingTool.html#gridSnapCellSize" class="linkProperty">gridSnapCellSize</a> and <a href="../symbols/DraggingTool.html#gridSnapOrigin" class="linkProperty">gridSnapOrigin</a>.This computes the point to snap to for each dragged part.The resulting point is used as the new <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>.<p>For the most general control over where a part may be dragged, either set the <a href="../symbols/Part.html#dragComputation" class="linkProperty">Part.dragComputation</a> propertyor override <a href="../symbols/DraggingTool.html#computeMove" class="linkMethod">computeMove</a>.For the common case of wanting to keep member nodes within the <a href="../symbols/Group.html" class="linkConstructor">Group</a> that they are members of,you can do something like:<pre> // this is a Part.dragComputation function for limiting where a Node may be dragged function stayInGroup(part, pt, gridpt) {   // don't constrain top-level nodes   var grp = part.containingGroup;   if (grp === null) return pt;   // try to stay within the background Shape of the Group   var back = grp.findObject("SHAPE");   if (back === null) return pt;   // allow dragging a Node out of a Group if the Shift key is down   //if (part.diagram.lastInput.shift) return pt;   var p1 = back.getDocumentPoint(go.Spot.TopLeft);   var p2 = back.getDocumentPoint(go.Spot.BottomRight);   var b = part.actualBounds;   var loc = part.location;   // find the padding inside the group's placeholder that is around the member parts   var m = (grp.placeholder !== null ? grp.placeholder.padding : new go.Margin(0));   // now limit the location appropriately   var x = Math.max(p1.x + m.left, Math.min(pt.x, p2.x - m.right - b.width - 1)) + (loc.x-b.x);   var y = Math.max(p1.y + m.top, Math.min(pt.y, p2.y - m.bottom - b.height - 1)) + (loc.y-b.y);   return new go.Point(x, y); }</pre>Note that this expects there to be a "SHAPE" object within the Group's visual tree that delimitswhere the part may be dragged within the group.This also expects that <a href="../symbols/Group.html#computesBoundsIncludingLinks" class="linkProperty">Group.computesBoundsIncludingLinks</a> is false.Then in your node template(s), just set:<pre>$(go.Node,  . . .,  { dragComputation: stayInGroup },  . . .)</pre><p>This tool does not utilize any <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.If the drag is successful, it raises the "SelectionMoved" or "SelectionCopied" <a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>and produces a "Move" or a "Copy" transaction.<p>If you want to programmatically start a new user mouse-gesture to drag a particular existing node,you can set the <a href="../symbols/DraggingTool.html#currentPart" class="linkProperty">currentPart</a> property and then start and activate the tool.<pre>  var tool = myDiagram.toolManager.draggingTool;  tool.currentPart = ...;  myDiagram.currentTool = tool;  tool.doActivate();</pre>
            </p>

<!-- ============================== constructor summary ==================== -->
            
        <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
            <div class="table-responsive">
            <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class DraggingTool.">
                <thead>
                        <tr>
                            <th scope="col" class="name">Name</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="name" >
                            <div class="name">
                                DraggingTool()
                            </div>
              </td>
              <td class="description">
                            <div class="description">
                            <!--newp--><p><p>You do not normally need to create an instance of this toolbecause one already exists as the <a href="../symbols/ToolManager.html#draggingTool" class="linkProperty">ToolManager.draggingTool</a>, which you can modify.<span class="nodetails" id="xconDraggingTool"><a class="morelink" onclick="hst('conDraggingTool')">More...</a></span> <span class="details" id="conDraggingTool"></span><div class="details" id="dconDraggingTool"><p>The <a href="../symbols/Tool.html#name" class="linkProperty">Tool.name</a> of this tool is "Dragging".</div>
                        
                        


              </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div><!-- class="table-responsive">-->
            

<!-- ============================== properties summary ===================== -->
            
                
                
        <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
        <div class="table-responsive">
        <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class DraggingTool.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Value Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
              <tr id="copiedParts" >
                
                <td class="name">
                  <div class="name">
                    copiedParts
                  </div>
                  <div class="attributes">
                    <span class="light">{Map.<Part,DraggingInfo>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets the collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s that this tool has copied.<span class="nodetails" id="xpropcopiedParts"><a class="morelink" onclick="hst('propcopiedParts')">More...</a></span> <span class="details" id="propcopiedParts">The value is a <a href="../symbols/Map.html" class="linkConstructor">Map</a> mapping <a href="../symbols/Part.html" class="linkConstructor">Part</a>s to DraggingInfo Objectsthat have a "point" property remembering the original location of that Part.The value is null when moving instead of copying.</span><div class="details" id="dpropcopiedParts"><p><a href="../symbols/DraggingTool.html#draggedParts" class="linkProperty">draggedParts</a> provides the map of Parts that are being moved and from which this collection was copied.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="copiesEffectiveCollection" >
                
                <td class="name">
                  <div class="name">
                    copiesEffectiveCollection
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether for a copying operation the extended selectionis copied or only the selected parts.<span class="nodetails" id="xpropcopiesEffectiveCollection"><a class="morelink" onclick="hst('propcopiesEffectiveCollection')">More...</a></span> <span class="details" id="propcopiesEffectiveCollection">The default value is true.Setting this property does not raise any events.</span><div class="details" id="dpropcopiesEffectiveCollection"><p>The <a href="../symbols/CommandHandler.html#copiesConnectedLinks" class="linkProperty">CommandHandler.copiesConnectedLinks</a> property serves a similar role for the CommandHandler.copySelection command,when the user types control-C to copy the currently selected parts.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="currentPart" >
                
                <td class="name">
                  <div class="name">
                    currentPart
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Part.html" class="linkConstructor">Part</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets the <a href="../symbols/Part.html" class="linkConstructor">Part</a> found at the mouse point.
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="delay" >
                
                <td class="name">
                  <div class="name">
                    delay
                  </div>
                  <div class="attributes">
                    <span class="light">{number}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>On touch gestures only, this property gets or sets the time in millisecondsfor which the mouse must be stationary before this tool can be started.<span class="nodetails" id="xpropdelay"><a class="morelink" onclick="hst('propdelay')">More...</a></span> <span class="details" id="propdelay">The default value is 100 milliseconds.Setting this property does not raise any events.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="draggedParts" >
                
                <td class="name">
                  <div class="name">
                    draggedParts
                  </div>
                  <div class="attributes">
                    <span class="light">{Map.<Part,DraggingInfo>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets the collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s being moved.<span class="nodetails" id="xpropdraggedParts"><a class="morelink" onclick="hst('propdraggedParts')">More...</a></span> <span class="details" id="propdraggedParts">The value is a <a href="../symbols/Map.html" class="linkConstructor">Map</a> mapping <a href="../symbols/Part.html" class="linkConstructor">Part</a>s to DraggingInfo Objectsthat have a "point" property remembering the original location of that Part.</span><div class="details" id="dpropdraggedParts"><p><a href="../symbols/DraggingTool.html#copiedParts" class="linkProperty">copiedParts</a> provides the map of Parts that have been copied during a copying operation, if any.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="dragsLink" >
                
                <td class="name">
                  <div class="name">
                    dragsLink
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                      <span class="since" title="since">1.3</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether the user can drag a single <a href="../symbols/Link.html" class="linkConstructor">Link</a>,disconnecting it from its connected nodes and possibly connecting itto valid ports when the link is dropped.<span class="nodetails" id="xpropdragsLink"><a class="morelink" onclick="hst('propdragsLink')">More...</a></span> <span class="details" id="propdragsLink"></span><div class="details" id="dpropdragsLink"><p>The default value is false.Setting this property does not raise any events.<p>In order to avoid too many cases of having both ends of a dragged Link connect to the same node (if allowed),it is commonplace to decrease the <a href="../symbols/LinkingBaseTool.html#portGravity" class="linkProperty">LinkingBaseTool.portGravity</a> to a smaller value such as 10 or 20.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="dragsTree" >
                
                <td class="name">
                  <div class="name">
                    dragsTree
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether moving or copying a node also includes all of thenode's tree children and their descendants, along with the links to those additional nodes.<span class="nodetails" id="xpropdragsTree"><a class="morelink" onclick="hst('propdragsTree')">More...</a></span> <span class="details" id="propdragsTree">The default value is false.Setting this property does not raise any events.</span><div class="details" id="dpropdragsTree"><p>The <a href="../symbols/CommandHandler.html#copiesTree" class="linkProperty">CommandHandler.copiesTree</a> property serves a similar role for the CommandHandler.copySelection command,when the user types control-C to copy the currently selected parts.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="gridSnapCellSize" >
                
                <td class="name">
                  <div class="name">
                    gridSnapCellSize
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Size.html" class="linkConstructor">Size</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the size of the grid cell used when snapping during a dragif the value of <a href="../symbols/DraggingTool.html#isGridSnapEnabled" class="linkProperty">isGridSnapEnabled</a> is true.<span class="nodetails" id="xpropgridSnapCellSize"><a class="morelink" onclick="hst('propgridSnapCellSize')">More...</a></span> <span class="details" id="propgridSnapCellSize">By default this property is the Size(NaN, NaN), which causes this tool to use the <a href="../symbols/Panel.html#gridCellSize" class="linkProperty">Panel.gridCellSize</a> value of the <a href="../symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>.Setting this property does not raise any events.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="gridSnapCellSpot" >
                
                <td class="name">
                  <div class="name">
                    gridSnapCellSpot
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the <a href="../symbols/Spot.html" class="linkConstructor">Spot</a> that specifies what point in the grid cell dragged parts snap to,if the value of <a href="../symbols/DraggingTool.html#isGridSnapEnabled" class="linkProperty">isGridSnapEnabled</a> is true.<span class="nodetails" id="xpropgridSnapCellSpot"><a class="morelink" onclick="hst('propgridSnapCellSpot')">More...</a></span> <span class="details" id="propgridSnapCellSpot">By default this property is <a href="../symbols/Spot.html#TopLeft" class="linkConstant">Spot.TopLeft</a>:node locations will snap exactly to the grid point.Setting this property does not raise any events.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="gridSnapOrigin" >
                
                <td class="name">
                  <div class="name">
                    gridSnapOrigin
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the snapping grid's origin point, in document coordinates,if the value of <a href="../symbols/DraggingTool.html#isGridSnapEnabled" class="linkProperty">isGridSnapEnabled</a> is true.<span class="nodetails" id="xpropgridSnapOrigin"><a class="morelink" onclick="hst('propgridSnapOrigin')">More...</a></span> <span class="details" id="propgridSnapOrigin">By default this property is the Point(NaN, NaN), which causes this tool to use the <a href="../symbols/Panel.html#gridOrigin" class="linkProperty">Panel.gridOrigin</a> value from the <a href="../symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>.Setting this property does not raise any events.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isComplexRoutingRealtime" >
                
                <td class="name">
                  <div class="name">
                    isComplexRoutingRealtime
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                      <span class="since" title="since">1.4</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether link routing takes some short-cuts during dragging.<span class="nodetails" id="xpropisComplexRoutingRealtime"><a class="morelink" onclick="hst('propisComplexRoutingRealtime')">More...</a></span> <span class="details" id="propisComplexRoutingRealtime">When false Links whose routing is AvoidsNodes are not routed to avoid Nodes, in order to improve dragging performance.The default value is true.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isCopyEnabled" >
                
                <td class="name">
                  <div class="name">
                    isCopyEnabled
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                      <span class="since" title="since">1.4</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether for any internal copying operation is permitted by control-drag-and-drop.<span class="nodetails" id="xpropisCopyEnabled"><a class="morelink" onclick="hst('propisCopyEnabled')">More...</a></span> <span class="details" id="propisCopyEnabled">This property affects the behavior of <a href="../symbols/DraggingTool.html#mayCopy" class="linkMethod">mayCopy</a>,but does not affect whether copied objects may be dropped into this diagram from a different diagram.</span><div class="details" id="dpropisCopyEnabled"><p>The default value is true.Setting this property does not raise any events.</div>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isGridSnapEnabled" >
                
                <td class="name">
                  <div class="name">
                    isGridSnapEnabled
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether the <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a> snaps objects to grid points.<span class="nodetails" id="xpropisGridSnapEnabled"><a class="morelink" onclick="hst('propisGridSnapEnabled')">More...</a></span> <span class="details" id="propisGridSnapEnabled">Whether the snapping movement of the dragged parts occurs during the drag or only upon a dropis determined by the value of <a href="../symbols/DraggingTool.html#isGridSnapRealtime" class="linkProperty">isGridSnapRealtime</a>.By default this property is false.Setting this property does not raise any events.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="isGridSnapRealtime" >
                
                <td class="name">
                  <div class="name">
                    isGridSnapRealtime
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                      <span class="since" title="since">1.1</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets whether the <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a> snaps objects to grid points during the drag.<span class="nodetails" id="xpropisGridSnapRealtime"><a class="morelink" onclick="hst('propisGridSnapRealtime')">More...</a></span> <span class="details" id="propisGridSnapRealtime">This property is ignored unless <a href="../symbols/DraggingTool.html#isGridSnapEnabled" class="linkProperty">isGridSnapEnabled</a> is true.By default this property is true; when false parts are only snapped to grid locations upon the drop (i.e. mouse-up).Setting this property does not raise any events.</span>
                
                </div>
                            </td>
                        </tr>
                    
              <tr id="startPoint" >
                
                <td class="name">
                  <div class="name">
                    startPoint
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                <div class="description">
                <!--newp <p> -->
                <p>Gets or sets the mouse point from which parts start to move.<span class="nodetails" id="xpropstartPoint"><a class="morelink" onclick="hst('propstartPoint')">More...</a></span> <span class="details" id="propstartPoint">The value is a Point in document coordinates.This property is normally set to the diagram's mouse-down point in <a href="../symbols/DraggingTool.html#doActivate" class="linkMethod">doActivate</a>,but may be set to a different point if parts are being copied from a different control.Setting this property does not raise any events.</span>
                
                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
                <dl class="inheritsList">
                <dt>Properties borrowed from class <a href="../symbols/Tool.html" class="linkConstructor">Tool</a>: </dt><dd><a href="../symbols/Tool.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/Tool.html#isActive" class="linkProperty">isActive</a>, <a href="../symbols/Tool.html#isEnabled" class="linkProperty">isEnabled</a>, <a href="../symbols/Tool.html#name" class="linkProperty">name</a>, <a href="../symbols/Tool.html#transactionResult" class="linkProperty">transactionResult</a></dd>
                </dl>
                
            

<!-- ============================== methods summary ======================== -->
            
                
                
        <h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
                <div class="table-responsive">
                <table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class DraggingTool.">
                    <thead>
                        <tr>
                            <th scope="col" class="name">Name, Return Type</th>
                            <th scope="col" class="description">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    
            <tr id="canStart">
                <td class="name">
                  
                  <div class="name">
                    canStart()
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This tool can run if the diagram allows selection and moves/copies/dragging-out,if the mouse has moved far enough away to be a drag and not a click,and if <a href="../symbols/DraggingTool.html#findDraggablePart" class="linkMethod">findDraggablePart</a> has found a selectable part at the mouse-down point.<span class="nodetails" id="xmethcanStart"><a class="morelink" onclick="hst('methcanStart')">More...</a></span> <span class="details" id="methcanStart"></span><div class="details" id="dmethcanStart"><p>This method may be overridden.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{boolean}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="computeEffectiveCollection">
                <td class="name">
                  
                  <div class="name">
                    computeEffectiveCollection(parts)
                  </div>
                  <div class="attributes">
                    <span class="light">{Map.<Part,DraggingInfo>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Find the actual collection of nodes and links to be moved or copied,given an initial collection.<span class="nodetails" id="xmethcomputeEffectiveCollection"><a class="morelink" onclick="hst('methcomputeEffectiveCollection')">More...</a></span> <span class="details" id="methcomputeEffectiveCollection">This includes links that connected at both ends to nodes being moved or copied,members of <a href="../symbols/Group.html" class="linkConstructor">Group</a>s, and if <a href="../symbols/DraggingTool.html#dragsTree" class="linkProperty">dragsTree</a> is true,this includes nodes and links that are "tree" descendants from selected nodes.</span><div class="details" id="dmethcomputeEffectiveCollection"><p>Note that this does not return a simple collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s,but a <a href="../symbols/Map.html" class="linkConstructor">Map</a> associating a chosen <a href="../symbols/Part.html" class="linkConstructor">Part</a>with an Object holding its original location Points as the value of the "point" property.<p>This method may be overridden.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Iterable.<Part>}</span> <b>parts</b>
                                          
                                      </dt>
                                      <dd>A <a href="../symbols/Set.html" class="linkConstructor">Set</a> or <a href="../symbols/List.html" class="linkConstructor">List</a> of Parts.</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{Map.<Part,DraggingInfo>}</span> a Map mapping <a href="../symbols/Part.html" class="linkConstructor">Part</a>s to DraggingInfo Objects        that have a "point" property remembering the original location of that Part.</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="computeMove">
                <td class="name">
                  
                  <div class="name">
                    computeMove(n, newloc, draggedparts, result)
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span>
                    
                      <span class="since" title="since">1.1</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This method computes the new location for a <a href="../symbols/Node.html" class="linkConstructor">Node</a> or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>,given a new desired location and an optional Map of dragged parts,taking any grid-snapping into consideration,any <a href="../symbols/Part.html#dragComputation" class="linkProperty">Part.dragComputation</a> function,and any <a href="../symbols/Part.html#minLocation" class="linkProperty">Part.minLocation</a> and <a href="../symbols/Part.html#maxLocation" class="linkProperty">Part.maxLocation</a>.<span class="nodetails" id="xmethcomputeMove"><a class="morelink" onclick="hst('methcomputeMove')">More...</a></span> <span class="details" id="methcomputeMove"></span><div class="details" id="dmethcomputeMove"><p>This method may be overridden.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Part.html" class="linkConstructor">Part</a>}</span> <b>n</b>
                                          
                                      </dt>
                                      <dd>the Node or simple Part that is being moved</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> <b>newloc</b>
                                          
                                      </dt>
                                      <dd>the proposed new location</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Map.<Part,DraggingInfo>=}</span> <b>draggedparts</b>
                                          
                                      </dt>
                                      <dd>an optional Map mapping <a href="../symbols/Part.html" class="linkConstructor">Part</a>s to DraggingInfo Objects       that have a "point" property remembering the original location of that Part.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>=}</span> <b>result</b>
                                          
                                      </dt>
                                      <dd>an optional Point that is modified and returned</dd>
                                  
                                  </dl>
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> the possibly grid-snapped computed Point that is within the minimum and maximum permitted locations</dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doActivate">
                <td class="name">
                  
                  <div class="name">
                    doActivate()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Start the dragging operation.<span class="nodetails" id="xmethdoActivate"><a class="morelink" onclick="hst('methdoActivate')">More...</a></span> <span class="details" id="methdoActivate">This calls <a href="../symbols/DraggingTool.html#computeEffectiveCollection" class="linkMethod">computeEffectiveCollection</a> and saves the result as <a href="../symbols/DraggingTool.html#draggedParts" class="linkProperty">draggedParts</a>.</span><div class="details" id="dmethdoActivate"><p>This starts a "Drag" transaction.Depending on what happens, the transaction may be finished as a "Move" or a "Copy"transaction, or it may be rolled-back if the tool is cancelled.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doCancel">
                <td class="name">
                  
                  <div class="name">
                    doCancel()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Abort any dragging operation.
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doDeactivate">
                <td class="name">
                  
                  <div class="name">
                    doDeactivate()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Stop the dragging operation by stopping the transaction and cleaning up any temporary state.
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doDragOver">
                <td class="name">
                  
                  <div class="name">
                    doDragOver(pt, obj)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.1</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Perform any additional side-effects during a drag, whether an internal move or copy or an external drag,that may affect the existing non-moved object(s).<span class="nodetails" id="xmethdoDragOver"><a class="morelink" onclick="hst('methdoDragOver')">More...</a></span> <span class="details" id="methdoDragOver"></span><div class="details" id="dmethdoDragOver"><p>This method may be overridden.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> <b>pt</b>
                                          
                                      </dt>
                                      <dd>a Point in document coordinates.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> <b>obj</b>
                                          
                                      </dt>
                                      <dd>the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> at the point,excluding what is being dragged or temporary objects;the argument may be null if the drag is occurring in the background of the diagram.Use <a href="../symbols/GraphObject.html#part" class="linkProperty">GraphObject.part</a> to get the <a href="../symbols/Node.html" class="linkConstructor">Node</a> or <a href="../symbols/Part.html" class="linkConstructor">Part</a> at the root ofthe visual tree of the stationary object.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doDropOnto">
                <td class="name">
                  
                  <div class="name">
                    doDropOnto(pt, obj)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.1</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Perform any additional side-effects after a drop, whether an internal move or copy or an external drop,that may affect the existing non-moved object(s).<span class="nodetails" id="xmethdoDropOnto"><a class="morelink" onclick="hst('methdoDropOnto')">More...</a></span> <span class="details" id="methdoDropOnto"></span><div class="details" id="dmethdoDropOnto"><p>This method may be overridden.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> <b>pt</b>
                                          
                                      </dt>
                                      <dd>a Point in document coordinates.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> <b>obj</b>
                                          
                                      </dt>
                                      <dd>the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> where the drop occurred,excluding what was dropped or temporary objects;the argument may be null if the drop occurred in the background of the diagram.Use <a href="../symbols/GraphObject.html#part" class="linkProperty">GraphObject.part</a> to get the <a href="../symbols/Node.html" class="linkConstructor">Node</a> or <a href="../symbols/Part.html" class="linkConstructor">Part</a> at the root ofthe visual tree of the stationary object.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doKeyDown">
                <td class="name">
                  
                  <div class="name">
                    doKeyDown()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Handle switching between copying and moving modes as the Control/Option key is pressed or released.
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doKeyUp">
                <td class="name">
                  
                  <div class="name">
                    doKeyUp()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Handle switching between copying and moving modes as the Control/Option key is pressed or released.
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doMouseMove">
                <td class="name">
                  
                  <div class="name">
                    doMouseMove()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Move the <a href="../symbols/DraggingTool.html#draggedParts" class="linkProperty">draggedParts</a> (or if copying, the <a href="../symbols/DraggingTool.html#copiedParts" class="linkProperty">copiedParts</a>) to follow the current mouse point.<span class="nodetails" id="xmethdoMouseMove"><a class="morelink" onclick="hst('methdoMouseMove')">More...</a></span> <span class="details" id="methdoMouseMove"></span><div class="details" id="dmethdoMouseMove"><p>This calls <a href="../symbols/DraggingTool.html#doDragOver" class="linkMethod">doDragOver</a> for any side-effects on stationary parts.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="doMouseUp">
                <td class="name">
                  
                  <div class="name">
                    doMouseUp()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>On a mouse-up finish moving or copying the effective selection.<span class="nodetails" id="xmethdoMouseUp"><a class="morelink" onclick="hst('methdoMouseUp')">More...</a></span> <span class="details" id="methdoMouseUp"></span><div class="details" id="dmethdoMouseUp"><p>This calls <a href="../symbols/DraggingTool.html#doDropOnto" class="linkMethod">doDropOnto</a> for any side-effects on stationary parts.<p>This also updates the diagram's bounds,raises a "SelectionCopied" or "SelectionMoved" DiagramEvent, and stops this tool.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="findDraggablePart">
                <td class="name">
                  
                  <div class="name">
                    findDraggablePart()
                  </div>
                  <div class="attributes">
                    <span class="light">{<a href="../symbols/Part.html" class="linkConstructor">Part</a>}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Return the selectable and movable/copyable <a href="../symbols/Part.html" class="linkConstructor">Part</a> at the mouse-down point.<span class="nodetails" id="xmethfindDraggablePart"><a class="morelink" onclick="hst('methfindDraggablePart')">More...</a></span> <span class="details" id="methfindDraggablePart">This is called by <a href="../symbols/DraggingTool.html#canStart" class="linkMethod">canStart</a> to decide if this tool is ready to run.</span><div class="details" id="dmethfindDraggablePart"><p>This method may be overridden.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{<a href="../symbols/Part.html" class="linkConstructor">Part</a>}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="mayCopy">
                <td class="name">
                  
                  <div class="name">
                    mayCopy()
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This predicate is true when the diagram allows objects to be copied and inserted,and some object in the selection is copyable,and the user is holding down the Control key (Option key on Mac).<span class="nodetails" id="xmethmayCopy"><a class="morelink" onclick="hst('methmayCopy')">More...</a></span> <span class="details" id="methmayCopy"></span><div class="details" id="dmethmayCopy"><p>This method may be overridden, although in most cases it is easiest to set <a href="../symbols/Part.html#copyable" class="linkProperty">Part.copyable</a>.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{boolean}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="mayMove">
                <td class="name">
                  
                  <div class="name">
                    mayMove()
                  </div>
                  <div class="attributes">
                    <span class="light">{boolean}</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This predicate is true when the diagram allows objects to be moved,and some object in the selection is movable.<span class="nodetails" id="xmethmayMove"><a class="morelink" onclick="hst('methmayMove')">More...</a></span> <span class="details" id="methmayMove"></span><div class="details" id="dmethmayMove"><p>This method may be overridden, although in most cases it is easiest to set <a href="../symbols/Part.html#movable" class="linkProperty">Part.movable</a>.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              
                                  <dl class="detailList">
                                  <dt class="heading">Returns:</dt>
                                  
                                      <dt><span class="light fixedFont">{boolean}</span> </dt>
                                  
                                  </dl>
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="moveParts">
                <td class="name">
                  
                  <div class="name">
                    moveParts(parts, offset, check)
                  </div>
                  <div class="attributes">
                    
                    
                      <span class="since" title="since">1.1</span>
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>Move a collection Map of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s by a given offset.<span class="nodetails" id="xmethmoveParts"><a class="morelink" onclick="hst('methmoveParts')">More...</a></span> <span class="details" id="methmoveParts"></span><div class="details" id="dmethmoveParts"><p>If <i>check</i> is true this respects the <a href="../symbols/Part.html#canMove" class="linkMethod">Part.canMove</a> predicate for <a href="../symbols/Node.html" class="linkConstructor">Node</a>s or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>swhen this is the <a href="../symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a>.It also respects <a href="../symbols/DraggingTool.html#isGridSnapEnabled" class="linkProperty">isGridSnapEnabled</a> in order to try to automatically snap part locations to a grid.And it also uses the <a href="../symbols/Part.html#dragComputation" class="linkProperty">Part.dragComputation</a> function, if any, to determine the new location for each part.<p>The first argument is a <a href="../symbols/Map.html" class="linkConstructor">Map</a> as produced by <a href="../symbols/DraggingTool.html#computeEffectiveCollection" class="linkMethod">computeEffectiveCollection</a>,not a <a href="../symbols/List.html" class="linkConstructor">List</a> or <a href="../symbols/Set.html" class="linkConstructor">Set</a> or <a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a> of Parts.Call <a href="../symbols/Diagram.html#moveParts" class="linkMethod">Diagram.moveParts</a> if you want to move a simple collection of Parts without having to create the argument Map.</div>
                 
                              
                                  <dl class="detailList">
                                  <dt class="heading">Parameters:</dt>
                                  
                                      <dt>
                                          <span class="light fixedFont">{Map.<Part,DraggingInfo>}</span> <b>parts</b>
                                          
                                      </dt>
                                      <dd>a Map mapping <a href="../symbols/Part.html" class="linkConstructor">Part</a>s to DraggingInfo Objects       that have a "point" property remembering the original location of that Part.</dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> <b>offset</b>
                                          
                                      </dt>
                                      <dd></dd>
                                  
                                      <dt>
                                          <span class="light fixedFont">{boolean}</span> <b>check</b>
                                          
                                      </dt>
                                      <dd>Whether to check <a href="../symbols/Part.html#canMove" class="linkMethod">Part.canMove</a> on each part.</dd>
                                  
                                  </dl>
                              
                              

                </div>
                            </td>
                        </tr>
                    
            <tr id="standardMouseSelect">
                <td class="name">
                  
                  <div class="name">
                    standardMouseSelect()
                  </div>
                  <div class="attributes">
                    
                    
                  </div>
                </td>
                <td class="description">
                                <div class="description">
                                <!--newp--><p><p>This override prevents the Control modifier unselecting an already selected part.<span class="nodetails" id="xmethstandardMouseSelect"><a class="morelink" onclick="hst('methstandardMouseSelect')">More...</a></span> <span class="details" id="methstandardMouseSelect">This also remembers the selectable <a href="../symbols/DraggingTool.html#currentPart" class="linkProperty">currentPart</a> at the current mouse point.</span><div class="details" id="dmethstandardMouseSelect"><p>This method may be overridden.Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
                 
                              
                              

                </div>
                            </td>
                        </tr>
                    
                    </tbody>
                </table>
                </div><!-- class="table-responsive">-->
                

                
                <dl class="inheritsList">
                <dt>Methods borrowed from class <a href="../symbols/Tool.html" class="linkConstructor">Tool</a>: </dt><dd><a href="../symbols/Tool.html#cancelWaitAfter" class="linkMethod">cancelWaitAfter</a>, <a href="../symbols/Tool.html#canStartMultiTouch" class="linkMethod">canStartMultiTouch</a>, <a href="../symbols/Tool.html#doMouseDown" class="linkMethod">doMouseDown</a>, <a href="../symbols/Tool.html#doMouseWheel" class="linkMethod">doMouseWheel</a>, <a href="../symbols/Tool.html#doStart" class="linkMethod">doStart</a>, <a href="../symbols/Tool.html#doStop" class="linkMethod">doStop</a>, <a href="../symbols/Tool.html#doWaitAfter" class="linkMethod">doWaitAfter</a>, <a href="../symbols/Tool.html#findToolHandleAt" class="linkMethod">findToolHandleAt</a>, <a href="../symbols/Tool.html#isBeyondDragSize" class="linkMethod">isBeyondDragSize</a>, <a href="../symbols/Tool.html#standardMouseClick" class="linkMethod">standardMouseClick</a>, <a href="../symbols/Tool.html#standardMouseOver" class="linkMethod">standardMouseOver</a>, <a href="../symbols/Tool.html#standardMouseWheel" class="linkMethod">standardMouseWheel</a>, <a href="../symbols/Tool.html#standardPinchZoomMove" class="linkMethod">standardPinchZoomMove</a>, <a href="../symbols/Tool.html#standardPinchZoomStart" class="linkMethod">standardPinchZoomStart</a>, <a href="../symbols/Tool.html#standardWaitAfter" class="linkMethod">standardWaitAfter</a>, <a href="../symbols/Tool.html#startTransaction" class="linkMethod">startTransaction</a>, <a href="../symbols/Tool.html#stopTool" class="linkMethod">stopTool</a>, <a href="../symbols/Tool.html#stopTransaction" class="linkMethod">stopTransaction</a>, <a href="../symbols/Tool.html#updateAdornments" class="linkMethod">updateAdornments</a></dd>
                </dl>
                
            
<!-- ============================== events summary ======================== -->
            

<!-- ============================== fields summary ===================== -->
            
                
                

            

<!-- ============================== constructor details ==================== -->

        </div> <!-- end contentBody -->
    </div> <!-- end row -->
    </div> <!-- end container-fluid -->

<!-- ============================== footer ================================= -->
        <div id="footer" class="fineprint" style="clear:both">
            Copyright &copy; 1998-2016 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
        </div>
    </body>
</html>
